<template>
	<!-- 任务 -->
	<view class="taskContainer">
		<!-- 搜索框 -->
		<Search />
		<div class="bottomContent">
			<!-- 多选框 -->
			<u-checkbox-group @change="checkboxGroupChange">
				<u-checkbox @change="checkboxChange" v-model="checked" size="40"></u-checkbox>
			</u-checkbox-group>
			<!-- 多选框右侧文字 -->
			<div class="bottomItem">
				<div class="top">
					<span>5月15日去客户现场演示</span>
				</div>
				<div class="bottom">
					<u-icon name="clock"  size="30"></u-icon>
					<span class="time">2021-05-15截止</span>
					<u-icon name="share"  size="30"></u-icon>
					<span>1</span>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
import Search from '../../components/Search/index.vue';
export default {
	data() {
		return {
			checked: false
		};
	},
	components: {
		Search
	},
	methods: {
		// 选中某个复选框时，由checkbox时触发
		checkboxChange(e) {
			//console.log(e);
		},
		// 选中任一checkbox时，由checkbox-group触发
		checkboxGroupChange(e) {
			// console.log(e);
		}
	}
};
</script>

<style lang="less">
.taskContainer {
	.bottomContent {
		height: 210rpx;
		width: 100%;
		background-color: #fff;
		margin: 10rpx 0 ;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		.bottomItem {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			font-size: 30rpx;
			.top{
				span{
					font-size: 40rpx;
				}
			}
			.bottom{
				.time{
					color: #C88C88;
					margin: 0 20rpx;
				}
				span{
					margin-left: 20rpx;
				}
			}
		}
	}
}
</style>
